<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>消防主机</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>

<ion-content>
    <div class="type-content-dt">
        <div class="detail-item horizontal-item" *ngFor="let item of typeData">
            <p class="detail-title">{{ item.fireDeviceTypeName || '' }}</p>
            <p class="detail-data">
                <span class="data " [ngClass]="{ 'data-total':item.deviceTotalCount !== 0 }">{{ item.deviceTotalCount || 0 }}</span>
                <span class="data " [ngClass]="{ 'data-nomal':item.normalCount !== 0 }">{{ item.deviceTotalCount - item.breakDownCount - item.alarmCount  || 0 }}</span>
                <span class="data " [ngClass]="{ 'data-alarm':item.alarmCount !== 0 }">{{ item.alarmCount || 0 }}</span>
                <span class="data " [ngClass]="{ 'data-break':item.breakDownCount !== 0 }">{{ item.breakDownCount || 0 }}</span>
            </p>
        </div>
    </div>
    <div class="fireHost-tabs">
        <div class="fireHost-tab" [ngClass]="{ active:currentTab == 'fireAlarmInfos' }" (click)="switchTab('fireAlarmInfos')">
            <img src="assets/imgs/fire/alarm-{{ currentTab == 'fireAlarmInfos' ? 'on' : 'off' }}.png" alt="">
            <span>火警点</span>
        </div>
        <div class="fireHost-tab" [ngClass]="{active:currentTab =='faultAlarmInfos'}" (click)="switchTab('faultAlarmInfos')">
            <img src="assets/imgs/fire/break-{{ currentTab == 'faultAlarmInfos' ? 'on' : 'off' }}.png" alt="">
            <span>故障点</span>
        </div>
    </div>
    <div class="type-detail">
        <div class="type-detail-item" *ngFor="let data of alarms[currentTab]" [ngStyle]="{ display: data.totalCount? 'block' : 'none' }">
            <div class="type-detail-title">
                <span>{{ data.fireDeviceTypeName }}</span>
                <span><i [ngClass]="{ alarm: currentTab == 'fireAlarmInfos' && data.totalCount, fault: currentTab == 'faultAlarmInfos' && data.totalCount }">{{ data.totalCount }}</i> <span>{{ currentTab === 'fireAlarmInfos'? '火警点': '故障点' }}</span></span>
            </div>
            <div class="type-detail-content" *ngFor="let item of data.messages">
                <ul>
                    <li>
                        <img src="assets/imgs/fire/{{ currentTab == 'fireAlarmInfos' ? 'alarm' : 'break' }}-off.png" alt="">
                        <span>{{ item.dateTime }}</span>
                        <p>{{ item.content }}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</ion-content>